/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

import { makeStyles, shorthands } from "@fluentui/react-components";

export const useFabricExplorerStyles = makeStyles({
    workspaceExplorer: {
        display: "flex",
        height: "400px",
        width: "100%",
        gap: "10px",
        overflow: "hidden",
    },
    workspaceList: {
        display: "flex",
        flexDirection: "column",
        width: "250px",
        minWidth: "250px",
        height: "100%",
        overflow: "hidden",
        borderRight: "1px solid var(--vscode-panel-border)",
        backgroundColor: "var(--vscode-sideBar-background)",
    },
    workspaceListCollapsed: {
        display: "flex",
        flexDirection: "column",
        width: "36px",
        minWidth: "36px",
        overflow: "visible",
        justifyContent: "flex-start",
        alignItems: "center",
        borderRight: "1px solid var(--vscode-panel-border)",
        backgroundColor: "var(--vscode-sideBar-background)",
    },
    workspaceContentList: {
        flexGrow: 1,
        overflow: "auto",
        height: "100%",
        display: "flex",
        flexDirection: "column",
    },
    workspaceTitle: {
        fontSize: "13px",
        fontWeight: "600",
        marginBottom: "8px",
        paddingLeft: "8px",
        paddingTop: "4px",
        paddingRight: "4px",
        flexShrink: 0,
    },
    workspaceListContainer: {
        flexGrow: 1,
        overflow: "auto",
        paddingLeft: "4px",
        paddingRight: "4px",
    },
    workspaceHeader: {
        flexShrink: 0,
        padding: "8px",
        gap: "8px",
        display: "flex",
        alignItems: "center",
    },
    workspaceSearchBox: {
        marginTop: "4px",
        marginBottom: "8px",
        paddingLeft: "4px",
        paddingRight: "4px",
    },
    workspaceItem: {
        ...shorthands.padding("4px", "8px", "4px", "24px"),
        cursor: "pointer",
        borderRadius: "2px",
        marginBottom: "1px",
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis",
        fontSize: "13px",
        height: "24px",
        lineHeight: "24px",
        position: "relative",
        "&:hover": {
            backgroundColor: "var(--vscode-list-hoverBackground)",
        },
    },
    workspaceItemSelected: {
        backgroundColor: "var(--vscode-list-activeSelectionBackground)",
        color: "var(--vscode-list-activeSelectionForeground)",
        fontWeight: "600",
        "@media (forced-colors:active)": {
            background: "Highlight",
            color: "HighlightText",
        },
        "&:hover": {
            backgroundColor: "var(--vscode-list-activeSelectionBackground)",
        },
    },
    collapseButton: {
        width: "calc(100% - 5px)",
        height: "24px",
        marginBottom: "8px",
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingLeft: "5px",
    },
    collapseButtonIcon: {
        fontSize: "12px",
    },
    collapseWorkspaceListButton: {
        width: "24px",
        height: "24px",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
    },
    headerRow: {
        backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
        height: "22px",
        minHeight: "22px",
        maxHeight: "22px",
    },
    tableRow: {
        height: "22px",
        minHeight: "22px",
        maxHeight: "22px",
        cursor: "pointer",
        "&:hover": {
            backgroundColor: "var(--vscode-list-hoverBackground)",
        },
        "&:nth-child(odd)": {
            backgroundColor: "rgba(0, 0, 0, 0.1)",
        },
    },
    selectedDataGridRow: {
        backgroundColor: "var(--vscode-list-activeSelectionBackground)",
        color: "var(--vscode-list-activeSelectionForeground)",
        "&:hover": {
            backgroundColor: "var(--vscode-list-activeSelectionBackground)",
        },
    },
    workspaceListMessageContainer: {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        padding: "16px",
    },
    workspaceContentMessageContainer: {
        padding: "16px",
        color: "var(--vscode-descriptionForeground)",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: "12px",
        flexDirection: "column",
        textAlign: "center",
        minHeight: "0",
        flex: "1 1 auto",
    },
    iconContainer: {
        width: "16px",
        height: "16px",
        marginRight: "8px",
        flexShrink: 0,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    },
    errorIcon: {
        width: "20px",
        height: "20px",
        marginBottom: "8px",
        flexShrink: 0,
    },
    workspaceExplorerMessage: {
        padding: "8px",
        color: "var(--vscode-descriptionForeground)",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: "8px",
        textAlign: "center",
        minHeight: "60px",
    },
    messageText: {
        textAlign: "center",
        maxWidth: "100%",
        wordWrap: "break-word",
        overflowWrap: "break-word",
    },
    hideTextOverflowCell: {
        overflow: "hidden",
        whiteSpace: "nowrap",
        textOverflow: "ellipsis",
    },
    filterIcon: {
        width: "12px",
        height: "12px",
    },
});
